<template>
	<view class="">
		<view class="cu-bar bg-white solids-bottom ">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>
				<text>{{ qbankName }}</text>
			</view>
			<view class="action">
				<button class="cu-btn round bg-blue shadow" @click="switchBank()">
					切换<text class="cuIcon-right"></text></button>
			</view>
		</view>
		<view class="cu-list grid solids-bottom col-4 no-border ">
			<view class="cu-item align-center " v-for="(item, index) in menus" :key="index" @click="gotoPages(item.url)">
				<view class="cu-avatar   bg-white" :style="{ backgroundImage: `url(${item.img})` }"></view>
				<text>{{ item.name }}</text>
				<view class="cu-tag badge" v-if="index == 0">
					<block>{{navData.mistakeNum}}</block>
				</view>
				<view class="cu-tag badge" v-if="index == 1">
					<block>{{navData.noteNum}}</block>
				</view>
				<view class="cu-tag badge" v-if="index == 2">
					<block>{{navData.favoriteNum}}</block>
				</view>
			</view>
		</view>

		<!-- 学习进度 -->
		<view class="bg-white flex solids-bottom padding-tb-sm">
			<view class="margin-left">
				<arprogress :percent="answerData.answerRate">
					<view class="text-center">
						<view>{{answerData.answerRate}}%</view>
						<view>学习进度</view>
					</view>
				</arprogress>
			</view>
			<view  style="width: 100%;">
				<view class="grid col-3 padding-top text-gray">
					<view class="text-left solids-right padding-left" >
						<view class="text-df">题库</view>
						<view class="text-df ">{{answerData.questionNum}} 道</view>
					</view>
					<view class="text-left solids-right padding-left" >
						<view class="text-df ">已学</view>
						<view class="text-df ">{{answerData.answerNum}} 道</view>
					</view>
					<view class="text-left padding-left" >
						<view class="text-df ">得分</view>
						<view class="text-df ">{{answerData.answerYesNum}} 分</view>
					</view>
				</view>
				<view class="padding-left margin-top-xs text-df text-grey">
					总学习人数：{{answerData.answerUserNum}}人
				</view>
			
			</view>
		</view>
		<!-- 		<view class="bg-white">
			<u-subsection :list="modelList" :current="curModel" @change="modelChange" mode="subsection"
			fontSize="16" ></u-subsection>
		</view> -->
		<view class="">
			<!-- 学科章节信息 -->
			<uni-collapse accordion>
				<uni-collapse-item v-for="(subject, index) in chapterData" :key="index">
					<template v-slot:title>
						<view>
							<view class="cu-list menu ">
								<view class="cu-item ">
									<view class="content text-bold">
										{{subject.name}}
									</view>
									<view class="action text-grey text-right " style="width: 120rpx;">
										{{subject.num}} / {{subject.total}}
										<view class="cu-progress round sm striped">
											<view class="bg-blue" :style="[{ width: subject.rate + '%'}]"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<view class="content">
						<view class="cu-list menu padding-left">
							<view class="cu-item arrow" v-for="(chapter, cindex) in subject.chapter" :key="cindex"
								@click="gotoChapterQuestion(chapter, subject.name)">
								<view class="content ">
									{{chapter.name}}
								</view>
								<view class="action text-grey">
									{{chapter.num}} / {{chapter.total}}
									<view class="cu-progress round xs">
										<view class="bg-blue" :style="[{ width: chapter.rate + '%'}]"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>

		</view>

		<view class="bg-white padding-xl" v-if="chapterData.length == 0">
			<u-empty mode="data" text="暂无题目信息,请重新选择题库"></u-empty>
		</view>

		<Copyright></Copyright>

	</view>
</template>

<script>
	import {
		homeInfo
	} from '@/api/api.js'
	import {
		qbmsChapterData,
		qbmsCategoryAnswerData,
		qbmsNavData
	} from '@/api/qbms.js'
	
	import arprogress from '../../components/ar-circle-progress/index.vue'

	export default {
		data() {
			return {
				qbankId: 0, // 题库ID
				qbankName: "", // 题库名称

				banners: [], // 轮播图
				menus: [], // 导航菜单
				loading: false,

				chapterData: [], // 章节数据
				answerData: {
					questionNum: 0,
					answerNum: 0,
					answerYesNum: 0,
					answerUserNum: 0,
					answerRate: 0,
				}, // 答题数据
				navData: {
					noteNum: 0,
					favoriteNum: 0,
					mistakeNum: 0,
				}, // 导航数据

				collapseIndex: "1", // 折叠面板默认开启

				modelList: ["顺序练习", "随机练习"],
				curModel: 0
			}
		},
		components: {
			arprogress
		},
		onLoad() {
			this.loadCategory();
			homeInfo().then(res => {
				this.banners = res.data.banners;
				this.menus = res.data.menus;
			}).catch(err => {

			});
		},

		onShow() {
			this.loadCategory();
			this.getChapterData();
			this.getAnswerData();
			this.getQbmsNavData();
		},

		methods: {
			/** 练习模式改变 */
			modelChange(index) {
				this.curModel = index;
			},
			// 加载题库分类
			loadCategory() {
				let qbankId = uni.getStorageSync("qbankId");
				let qbankName = uni.getStorageSync("qbankName");
				if (!qbankId) {
					uni.navigateTo({
						url: "/pages/index/bankSelect"
					})
				}
				this.qbankId = qbankId;
				this.qbankName = qbankName;
			},

			/** 获取章节数据 */
			getChapterData() {
				qbmsChapterData({
					categoryId: this.qbankId
				}).then(res => {
					this.chapterData = res.data;
				}).catch(err => {});
			},
			
			/** 获取答题数据 */
			getAnswerData() {
				qbmsCategoryAnswerData({
					categoryId: this.qbankId
				}).then(res => {
					this.answerData = res.data;
				}).catch(err => {
					
				})
			},
			/** 获取题库导航数据 */
			getQbmsNavData() {
				qbmsNavData({
					categoryId: this.qbankId
				}).then(res => {
					this.navData = res.data
				}).catch(err => {
					
				})
			},
			
			/** 跳转章节题目 */
			gotoChapterQuestion(chapter, subjectName) {
				uni.$u.route({
					url: "/pages/qbms/chapterQuestion",
					params: {
						chapterId: chapter.id,
						chapterName: chapter.name,
						subjectName: subjectName,
					}
				})
			},

			/** 切换题库 */
			switchBank() {
				uni.navigateTo({
					url: "/pages/index/bankSelect"
				})
			},

			/** 跳转页面 */
			gotoPages(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			onShareAppMessage(res) {
			    return {
			      title: '医考真题汇',
			      path: '/pages/index/home'
			    }
			},
			onShareTimeline() {
				return {
				  title: '医考真题汇',
				  path: '/pages/index/home'
				}
			}

		}
	}
</script>

<style scoped>
.cu-list.grid.no-border>.cu-item {
    padding-top: 5px;
    padding-bottom: 5px;

}
</style>
